<template>
	<view class="page group-invite">
		<nav-bar back>{{type==='邀请'?type:'群成员'}}<button :class="!inviteSize&&!blacklistSize&&!otherSize?'btn-disabled':''"
				@click="type==='移出'?dialogToggle():onInviteFriends()"
				:disabled="!inviteSize&&!blacklistSize&&!otherSize">确认<text
					v-if="inviteSize||blacklistSize||otherSize">({{(type==='邀请'||type==='群聊')?inviteSize:type==='黑名单'?blacklistSize:otherSize }})</text></button></nav-bar>
		<view class="nav-bar">
			<view class="nav-search">
				<view class="search" style="animation-duration: .3s;background-color: #fff;" v-if="type==='邀请'">
					<view class="imgs" v-for="friend in friendItems.filter(v=>v.checked)" :key="friend.id">
						<image class="animate__slideInLeft animate__animated animate__fadeOut"
							:src="friend.headImage||'/static/image/pic.jpg'" alt=""
							style="width: 60rpx;height: 60rpx;border-radius: 10rpx;animation-duration: .3s;" />
					</view>
					<uni-icons v-show="!friendItems.filter(v=>v.checked).length" type="search" size="24"
						color="#c9c8cc"></uni-icons>
					<input v-model="searchText" type="text" placeholder="搜索" />
				</view>
				<view class="search" style="animation-duration: .3s;background-color: #fff;"  v-else-if="type==='群聊'">
					<view class="imgs" v-for="friend in friendItems.filter(v=>v.checked)" :key="friend.id">
						<image class="animate__slideInLeft animate__animated animate__fadeOut"
							:src="friend.headImage||'/static/image/pic.jpg'" alt=""
							style="width: 60rpx;height: 60rpx;border-radius: 10rpx;animation-duration: .3s;" />
					</view>
					<uni-icons v-show="!friendItems.filter(v=>v.checked).length" type="search" size="24"
						color="#c9c8cc"></uni-icons>
					<input v-model="searchText" type="text" placeholder="搜索" />
				</view>
				<view class="search" style="animation-duration: .3s;background-color: #fff;" v-else-if="type==='管理员'">
					<view class="imgs" v-for="member in groupMembers.filter(v=>v.isAdmin==='1')">
						<image class="animate__slideInLeft" :src="member.headImage||'/static/image/pic.jpg'" alt=""
							style="width: 60rpx;height: 60rpx;border-radius: 10rpx;animation-duration: .3s;" />
					</view>
					<uni-icons v-show="!groupMembers.filter(v=>v.isAdmin==='1').length" type="search" size="24"
						color="#c9c8cc"></uni-icons>
					<input v-model="searchText" type="text" placeholder="搜索" />
				</view>
				<view v-else class="search" style="animation-duration: .3s;background-color: #fff;">
					<uni-icons v-show="!groupMembers.filter(v=>v.isAdmin==='1').length" type="search" size="24"
						color="#c9c8cc"></uni-icons>
					<input v-model="searchText" type="text" placeholder="搜索" />
				</view>
			</view>
		</view>
		<view class="friend-items">
			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
				<checkbox-group>
					<view v-for="friend in friendItems" :key="friend.id" v-if="type==='邀请'">
						<view class="friend-item" @click="onSwitchChecked(friend)"
							v-show="!friend.disabled&&friend.nickName.includes(searchText)"
							:class="{ checked: friend.checked, disabled:friend.disabled }">
							<checkbox :checked="friend.checked" @click.stop="onSwitchChecked(friend)" color="#07c25f"
								style="transform:scale(0.8)" />
							<head-image :name="friend.nickName" :online="friend.online" :url="friend.headImage"
								size="small"></head-image>
							<view class="friend-name">{{ friend.nickName }}</view>
						</view>
					</view>
					<view v-for="friend in friendItems" :key="friend.id" v-if="type==='群聊'">
						<view class="friend-item" @click="onSwitchChecked(friend)"
							v-show="!friend.disabled&&friend.nickName.includes(searchText)"
							:class="{ checked: friend.checked, disabled:friend.disabled }">
							<checkbox :checked="friend.checked" @click.stop="onSwitchChecked(friend)" color="#07c25f"
								style="transform:scale(0.8)" />
							<head-image :name="friend.nickName" :online="friend.online" :url="friend.headImage"
								size="small"></head-image>
							<view class="friend-name">{{ friend.nickName }}</view>
						</view>
					</view>
					<view v-for="member in groupMembers" :key="member.userId" v-if="type==='移出'">
						<view class="friend-item" @click="onSwitchChecked(member)"
							v-if="!isSelf(member)&&member.showNickName.includes(searchText)" :class="{ checked: member.quit }">
							<checkbox :checked="member.quit" @click.stop="onSwitchChecked(member)" color="#07c25f"
								style="transform:scale(0.8)" />
							<head-image :name="member.showNickName" :online="member.online" :url="member.headImage"
								size="small"></head-image>
							<view class="member-name">{{ member.showNickName }}
								<uni-tag v-if="member.userId == group.ownerId" text="群主" size="small" circle type="error">
								</uni-tag>
								<uni-tag v-if="member.isAdmin === '1'" text="管理员" size="small" circle type="primary"></uni-tag>
								<uni-tag v-if="member.userId == userStore.userInfo.id" text="我" size="small" circle></uni-tag>
							</view>
						</view>
					</view>
					<view v-for="member in groupMembers" :key="member.userId" v-if="type==='管理员'">
						<view class="friend-item" @click="onSwitchChecked(member)"
							v-if="!isSelf(member)&&member.showNickName.includes(searchText)"
							:class="{ checked: member.isAdmin==='1' }">
							<checkbox :checked="member.isAdmin==='1'" @click.stop="onSwitchChecked(member)" color="#07c25f"
								style="transform:scale(0.8)" />
							<head-image :name="member.showNickName" :online="member.online" :url="member.headImage"
								size="small"></head-image>
							<view class="member-name">{{ member.showNickName }}</view>
						</view>
					</view>
					<view v-for="member in blacklist" :key="member.userId" v-if="type==='黑名单'">
						<view class="friend-item" @click="onSwitchChecked(member)"
							v-if="!isSelf(member)&&member.showNickName.includes(searchText)"
							:class="{ checked: member.isBlacklist==='0' }">
							<checkbox :checked="member.isBlacklist==='0'" @click.stop="onSwitchChecked(member)" color="#07c25f"
								style="transform:scale(0.8)" />
							<head-image :name="member.showNickName" :online="member.online" :url="member.headImage"
								size="small"></head-image>
							<view class="member-name">{{ member.showNickName }}
								<uni-tag v-if="member.userId == group.ownerId" text="群主" size="small" circle type="error">
								</uni-tag>
								<uni-tag v-if="member.isAdmin === '1'" text="管理员" size="small" circle type="primary"></uni-tag>
								<uni-tag v-if="member.userId == userStore.userInfo.id" text="我" size="small" circle></uni-tag>
							</view>
						</view>
					</view>
				</checkbox-group>
			</scroll-view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="确定要移出这些成员吗？" @confirm="onInviteFriends"
				@close="null">
				<checkbox-group>
					<label @click="isBlack=isBlack==='0'?'1':'0'">
						<checkbox @click.stop="isBlack=isBlack==='0'?'1':'0'" :checked="isBlack==='1'" color="#07c25f"
							style="transform:scale(0.8)" /><text>并加入黑名单</text>
					</label>
				</checkbox-group>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupId: null,
				group: {},
				searchText: "",
				friendItems: [],
				groupMembers: [],
				blacklist: [],
				type: '',
				isBlack: "0",
			}
		},
		methods: {
			onInviteFriends() {
				let params = {
					groupId: this.groupId,
					isBlack: this.type === '移出' ? this.isBlack : undefined,
					[this.type === '邀请' ? 'friendIds' : 'userId']: []
				}
				this.friendItems.forEach((f) => {
					if (this.type === '邀请' && f.checked) {
						params.friendIds.push(f.id);
					}
					if (this.type === '群聊' && f.checked) {
						params.userId.push(f.id);
					}
				})
				this.blacklist.forEach((f) => {
					if (this.type === '黑名单' && f.isBlacklist === '0') {
						params.userId.push(f.userId);
					}
				})
				this.groupMembers.forEach((f) => {
					if (this.type === '移出' && f.quit) {
						params.userId.push(f.userId);
					}
					if (this.type === '管理员' && f.isAdmin === '1') {
						params.userId.push(f.userId);
					}
				})
				if (params.friendIds?.length > 0 || params.userId?.length > 0) {
					const httpParams = {
						invite: {
							url: `/group/invite`,
							method: 'POST',
							data: params
						},
						addGroup: {
							url: `/group/create?userId=${params.userId}`,
							method: 'POST',
						},
						kick: {
							url: `/group/kick/${this.groupId}?userId=${params.userId}&isBlack=${params.isBlack}`,
							method: 'DELETE',
						},
						blackList: {
							url: `/groupMember/updateMemberBlack/${this.groupId}?userId=${params.userId}&isBlack=0`,
							method: 'PUT',
						},
						adminList: {
							url: `/groupMember/updateMemberRole/${this.groupId}?userId=${params.userId}&isAdmin=1`,
							method: 'PUT',
							// data: params
						},
					}
					console.log('httpParams', httpParams);
					this.$http(
						this.type === '邀请' ? httpParams.invite :
						this.type === '群聊' ? httpParams.addGroup :
						this.type === '移出' ? httpParams.kick :
						this.type === '黑名单' ? httpParams.blackList :
						httpParams.adminList
					).then(() => {
						uni.showToast({
							title: this.type === '群聊' ? '群聊创建成功，快邀请小伙伴进群吧':this.type === '黑名单' ? '已移出黑名单' : this.type === '管理员' ? '添加成功' : this.type + '成功',
							icon: 'none'
						})
						setTimeout(() => {
							// 回退并刷新
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2];
							prevPage.$vm.loadGroupMembers();
							uni.navigateBack();
						}, 1000);

					})
				}
			},
			onShowUserInfo(userId) {
				uni.navigateTo({
					url: "/pages/common/user-info?id=" + userId
				})
			},
			onSwitchChecked(friend) {
				if (this.type === '邀请' || this.type === '群聊') {
					friend.checked = !friend.checked;
				} else if (this.type === '黑名单') {
					friend.isBlacklist = friend.isBlacklist === '0' ? '1' : '0'
				} else {
					if (this.type === '移出') {
						friend.quit = !friend.quit;
					}
					if (this.type === '管理员') {
						friend.isAdmin = friend.isAdmin === '0' ? '1' : '0'
					}
				}
			},
			initFriendItems() {
				this.friendItems = [];
				let friends = this.friendStore.friends;
				friends.forEach((f => {
					let item = {
						id: f.id || 3,
						headImage: f.headImage,
						nickName: f.nickName,
						online: f.online
					}
					item.disabled = this.isGroupMember(f.id);
					item.checked = false;
					this.friendItems.push(item);
				}))
				console.log('friendItems', this.friendItems);
			},
			loadGroupInfo() {
				this.$http({
					url: `/group/find/${this.groupId}`,
					method: 'GET'
				}).then((group) => {
					this.group = group;
					console.log('群状态', this.group)
					// 更新聊天页面的群聊信息
					this.chatStore.updateChatFromGroup(group);
					// 更新聊天列表的群聊信息
					this.groupStore.updateGroup(group);
				});
			},
			loadGroupMembers(id) {
				this.$http({
					url: `/group/members/${id}`,
					method: "GET"
				}).then((members) => {
					this.groupMembers = members.filter(m => !m.quit);
					if (this.type === '管理员') {
						this.groupMembers = this.groupMembers.filter(v => v.isAdmin === "0");
					}
					this.initFriendItems()
					console.log('groupMembers', this.groupMembers);
				})
			},
			loadBlacklist(id) {
				this.$http({
					url: `/group/members/isBlack`,
					method: "POST",
					data: {
						"groupId": id,
						"isBlacklist": "1"
					}
				}).then((members) => {
					this.blacklist = members;
					console.log('blacklist', this.blacklist);
				})
			},
			isGroupMember(id) {
				return this.groupMembers.some(m => m.userId == id);
			},
			isSelf(member) {
				return this.group.ownerId === member.userId || this.userStore.userInfo.id == member
					.userId;
			},
			dialogToggle() {
				this.$refs.alertDialog.open()
			},
		},
		computed: {
			inviteSize() {
				return this.friendItems.filter(f => f.checked).length;
			},
			blacklistSize() {
				return this.blacklist.filter(f => f.isBlacklist === "0").length;
			},
			otherSize() {
				if (this.type === '移出') {
					return this.groupMembers.filter(f => f.quit).length;
				}
				if (this.type === '管理员') {
					return this.groupMembers.filter(f => f.isAdmin === "1").length;
				}
			},
		},
		onLoad(options) {
			this.groupId = options.id;
			this.type = options.type;
			if (this.type !== '群聊') {
				this.loadGroupInfo();
				this.loadGroupMembers(options.id);
			}
			if (this.type === '邀请' || this.type === '群聊') {
				this.initFriendItems();
			}
			if (this.type === '黑名单') {
				this.loadBlacklist(options.id);
			}

		}
	}
</script>

<style lang="scss" scoped>
	.group-invite {
		position: relative;
		display: flex;
		flex-direction: column;

		.title {
			.btn-disabled{
				color: #a9a9a9;
				background-color: #f2f2f2
			}
			button {
				position: absolute;
				color: #fff;
				background-color: #07c160;
				right: 20rpx;
				bottom: 0rpx;
				padding: 0;
				font-size: 30rpx !important;
				width: 120rpx;
				line-height: 60rpx;
			}
		}

		.nav-bar {
			.nav-search {
				padding: 0 20rpx;

				.search {
					background-color: #f8f8f8 !important;
					overflow: auto;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					padding: 10rpx 10rpx;
					max-height: 80rpx;

					.imgs {
						max-height: 60rpx;
						margin-left: 6rpx;
					}

					uni-input {
						line-height: 52rpx;
						padding: 0rpx 10rpx;
						min-width: 100rpx;
					}
				}
			}
		}

		.friend-items {
			position: relative;
			flex: 1;
			overflow: hidden;

			.friend-item {
				height: 120rpx;
				display: flex;
				margin-bottom: 1rpx;
				position: relative;
				padding: 0 30rpx;
				align-items: center;
				background-color: white;
				white-space: nowrap;

				&.disabled {
					background-color: $im-bg-active !important;
				}

				// &.checked {
				// 	background-color: $im-color-primary-light-9;
				// }


				.member-name {
					display: flex;
					align-items: center;
					flex: 1;
					padding-left: 20rpx;
					font-size: $im-font-size;
					line-height: $im-font-size * 2;
					white-space: nowrap;
					overflow: hidden;

					.uni-tag {
						margin-left: 5rpx;
						width: 40rpx;
						border: 0;
						height: 30rpx;
						line-height: 30rpx;
						font-size: 20rpx;
						text-align: center;
					}
				}

				.friend-name {
					flex: 1;
					padding-left: 20rpx;
					font-size: 30rpx;
					font-weight: 600;
					line-height: 60rpx;
					white-space: nowrap;
					overflow: hidden;
				}

				.scroll-bar {
					height: 100%;
				}
			}
		}

		.add-btn {
			background-color: $im-color-primary !important;
		}

		.del-btn {
			background-color: red;
		}

		.black-btn {
			background-color: black;
		}
	}
</style>